<template>
    <div class="employee-index">
        <div class="employee-header">
            <div class="employee-search">
                <p>医护查询：</p>
                <el-input v-model="pageParams.name" style="width: 200px; height: 36px;" placeholder="请输入医护名称" prefix-icon="Search" />
                <p>状态：</p>
                <el-dropdown>
                    <el-button style="width: 70px;">
                        {{ altogether }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="selectAction('启用')">启用</el-dropdown-item>
                            <el-dropdown-item @click="selectAction('停用')">停用</el-dropdown-item>
                            <el-dropdown-item @click="selectAction('全部')">全部</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>


                <el-button style="margin-left: 10px; height: 36px;" type="warning" color="#000" round @click="pageQuery">查询</el-button>

            </div>
            <div class="employee-chart">
                <el-button style="height: 36px;" type="success" color="#000" @click="handleAddStaff">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加人员
                </el-button>
                <el-button style="height: 36px;" type="danger" @click="handleDeleteStaffList">
                    <el-icon>
                        <Minus />
                    </el-icon>
                    批量删除
                </el-button>
            </div>
        </div>
        <div class="employee-table">
            <el-table :data="records" stripe height="500" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="医护名称" width="130" align="center">
                </el-table-column>
                <el-table-column prop="departmentName" label="部门分类" width="140" align="center">
                </el-table-column>
                <el-table-column label="图片" width="200" align="center">
                    <template v-slot:default="scope">
                        <el-image :src="scope.row.image" style="width: 50px; height: 50px" />
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="预约价格" >
                    <template v-slot="scope">
                        ￥ {{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="100">
                    <template v-slot="scope">
                        · {{ scope.row.status === 0 ? '禁用' : '启用' }}
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最后操作时间" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button link type="primary" class="text-danger"
                            @click="handleDeleteStaff(scope.row)">删除</el-button>
                        <el-button link type="primary" @click="handleUpdateStaff(scope.row)">修改</el-button>
                        <el-button link type="primary" :class="{ 'text-danger': scope.row.status === 1 }"
                            @click="handleStartOrStop(scope.row)">{{ scope.row.status === 1 ? '禁用' :
                                '启用' }}</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageList" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total">
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
// import { getEmployeePage, enableOrDisableEmployee } from '@/api/employee'
import { queryStaffPage, updateStaffStatus, deleteStaffList } from '@/api/staff'
import { ref, onMounted } from 'vue'
// import { Search } from '@element-plus/icons-vue'
import router from '@/router';

// 分页参数
const pageParams = ref({
    name: '',// 员工姓名
    status: null, // 状态
    page: 1, // 当前页
    pageSize: 10, // 每页显示条数
    total: 0 // 总条数
})

const altogether = ref('全部')

const records = ref([])

// 新增员工
const handleAddStaff = () => {
    // console.log('新增员工')
    router.push('/staff/add')
}

// 修改员工
const handleUpdateStaff = (row) => {
    // console.log('修改员工:', row)
    router.push({
        path: '/staff/add',
        query: { id: row.id }
    });
}

// 修改状态
const handleStartOrStop = (row) => {
    console.log('变更医护状态:', row)

    const newStatus = row.status === 1 ? 0 : 1; // 切换状态
    const actionMessage = newStatus === 0 ? '禁用' : '启用'; // 根据状态决定消息

    updateStaffStatus({ id: row.id, status: newStatus }).then(res => {
        if (res.code === 1) {
            ElMessage.success(`账号${actionMessage}成功！`)
            pageQuery()
        } else {
            ElMessage.error(`账号${actionMessage}失败！`)
        }
    }).catch((err) => {
        console.log(err);
        ElMessage.error(`操作失败，请稍后再试！`)
    })
}


// 处理分页逻辑
const handleSizeChange = (newSize) => {
    pageParams.value.pageSize = newSize
    // console.log('pageSize:', newSize);
    pageParams.value.pageSize = newSize
    pageQuery()
}

// 处理当前页逻辑
const handleCurrentChange = (newPage) => {
    pageParams.value.page = newPage
    // console.log('currentPage:', newPage);
    pageParams.value.page = newPage
    pageQuery()
}

onMounted(async () => {
    pageQuery()
})

// 查询
function pageQuery() {
    queryStaffPage(pageParams.value).then(res => {
        // console.log(res);
        pageParams.value.total = res.data.total
        records.value = res.data.records
    })
}

// 删除
const handleDeleteStaff = (row) => {
    // console.log('删除员工:', row)
    // console.log('删除员工:', row.id)
    ElMessageBox.confirm('确认删除选中的员工吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // console.log('点击了确定')
        deleteStaffList([row.id])
        .then(res => {
            // console.log(res);
            ElMessage.success('删除成功！')
            pageQuery()
        })
       .catch(err => {
            // console.log(err)
            ElMessage.error('删除失败！')
       })
    }).catch(() => {
        // console.log('点击了取消')
    })
    
}


function selectAction(action) {
    altogether.value = action;
    if (action === '全部') {
        pageParams.value.status = null
    } else if (action === '启用') {
        pageParams.value.status = 1
    } else if (action === '停用') {
        pageParams.value.status = 0
    }
}

const selectedRows = ref([]);
const handleSelectionChange = (val) => {
    console.log('选中的行:', val);
    const selectedIds = val.map(item => item.id);
    
    console.log('选中的 ID:', selectedIds);
    selectedRows.value = selectedIds; // 将选中的行数据存储在 selectedRows 中
    console.log('选中的行:', selectedRows.value);
}
// 批量删除
const handleDeleteStaffList = () => {
    console.log('批量删除:', selectedRows.value);
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请先选择要删除的员工！')
        return;
    }
    ElMessageBox.confirm('确认批量删除选中的员工吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // console.log('点击了确定')
        deleteStaffList(selectedRows.value)
        .then(res => {
            // console.log(res);
            ElMessage.success('删除成功！')
            pageQuery()
        })
       .catch(err => {
            // console.log(err)
            ElMessage.error('删除失败！')
       })
    }).catch(() => {
        // console.log('点击了取消')
    })
}
</script>

<style lang="scss">
.employee-index {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .employee-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .employee-search {
            display: flex;
            align-items: center;

            p {
                margin-right: 5px;
                margin-left: 10px;
                font-size: 18px;
            }

            // .el-input {
            //   margin-right: 10px;
            // }

        }

        .employee-chart {
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-icon {
                font-size: 16px;
                margin-bottom: 3px;
                padding-right: 3px;
            }
        }
    }

    .employee-table {
        // width: 100%;
        padding: 10px;

        .text-danger {
            color: red; // 设置文本颜色为红色
        }
    }

    .pageList {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


}
</style>